
import React from "react";

import 'antd/dist/antd.css';
import scss from '../../assets/styles/cloudmap.module.scss';

import { MCateDesp } from '../../components/page/onlinehelp'
import { MPre, MTitles, MfullTitle, MItem } from '../../components/page/onlinehelp'
import { showItem } from './data'

let { cateContent } = require('./data')

// 组件模板
const Module: any = {
    "MTitles": MTitles,
    "MfullTitle": MfullTitle,
    "MItem": MItem,
    "MPre": MPre,
}

interface State {
    area: number;
}
interface Props {

}
export default class DocumentPage extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = {
            area: 8
        }
    }
    // 列表点击事件
    clickCounter = (id: any, value: any, key: any) => {
        // 展示
        if (value === 0) {
            this.setState({
                area: key
            })
        }
        else {
            cateContent[id].status = !cateContent[id].status;
            this.setState({});
        }
    }
    render() {
        return (
            <>
                <div className={scss['cloud-help-navigation']}>
                    <MCateDesp
                        clouditemList={cateContent}
                        clickCounter={(id, value, key) => this.clickCounter(id, value, key)}
                    />
                </div>
                <div className={scss['cloud-help-item']}>
                    <div className={scss['cloud-out-of-bounds']}>
                        {
                            showItem.map((item, index) => {
                                let DDD = Module[item.type];
                                return <DDD data={item.item} key={index + item.type} />
                            })
                        }
                    </div>
                </div>

            </>

        )
    }
}